<template>
  <s-layout id="layout" :title="list.type==1?'日报详情':list.type==2?'周报详情':'月报详情'" navbar="normal" leftIconColor="#333" :autoBack="false" :bgColor="state.bgColor"
    :tabbarshow='false' :titleStyle="{ color: '#333', fontSize: '32rpx' }">
    <view class="list_box" :style="{ paddingTop: (safeAreaInsets?.top + 44) + 'px' }">
      <view class="list_box_list" v-if="list">
        <view class="header area">
          <up-avatar :src="sheep.$url.cdn(list.user.avatar)" shape="circle" size="60"></up-avatar>
          <view class="header_cont">
            <view class="title">{{list.user.nickname}}提交的{{list.type==1?'日报':list.type==2?'周报':'月报'}}</view>
            <view class="times">{{ list.date }}<text class="hint"> 提交</text></view>
          </view>
        </view>
        <view class="content">
            <view class="title">{{ list.type == 1?'今日':list.type == 2?'本周':'本月' }}总结</view>
            <view class="cont_information">
              {{ list.done_content }}
            </view>
            <view class="title">{{ list.type == 1?'今日':list.type == 2?'本周':'本月' }}未完成工作内容</view>
            <view class="cont_information">
              {{ list.undone_content }}
            </view>
            <view class="title">{{ list.type == 1?'今日':list.type == 2?'本周':'本月' }}需协调工作内容</view>
            <view class="cont_information">
              {{ list.need_coord_content }}
            </view>
            <view class="title pic">图片</view>
            <view class="cont_information">
              <image v-for="(i,index) in images" :src="`${baseUrl}` + i" mode="scaleToFill" :key="index" @click="previewImage(index)"/>
            
            </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
import { baseUrl } from '@/sheep/config';
import sheep from '@/sheep';
import { onLoad, onReachBottom } from "@dcloudio/uni-app";
import { ref, reactive } from 'vue';
const userStore = sheep.$store('user');
const { safeAreaInsets } = uni.getSystemInfoSync()
const state = ref({
  bgColor: '#fff',
  type:'',
  date:'',
  user_id:'',
  topName:'',
})
const list = ref()
onLoad((options) => {
  state.value.type = options.type
  state.value.date= options.date
  state.value.user_id = options.user_id
  getDetailContent()
})


//数据请求
const images = ref([])
const getDetailContent = () => {
  if(state.value.type  == 1){
    let parpam = {
    date:state.value.date,
    type:state.value.type,
    user_id: state.value.user_id
  }
    sheep.$api.report.getDetailByUidType(parpam).then((res)=>{
        list.value =res?.data
        images.value = res.data.images?.split(',');
       });
  }
  if(state.value.type  == 2){
    const datelist = state.value.date.split(' ~ ')
    let parpam = {
      start_date:datelist[0],
      end_date:datelist[1],
      type:state.value.type,
      user_id: state.value.user_id
  }
    sheep.$api.report.getDetailByUidType(parpam).then((res)=>{
        list.value =res?.data
        images.value = res.data.images?.split(',');
       });
  }
  if(state.value.type  == 3){
    let parpam = {
      month:state.value.date,
      type:state.value.type,
      user_id: state.value.user_id
  }
    sheep.$api.report.getDetailByUidType(parpam).then((res)=>{
        list.value =res?.data
        images.value = res.data.images?.split(',');
       });
  }
}

const previewImage = (index) => {
  uni.previewImage({
    current: index,
    urls: images.value.map(imgUrl => sheep.$url.cdn(imgUrl)),
  });
}

</script>

<style lang="scss" scoped>
// 滚动
.comprehensive {
  width: calc(100% - 40rpx);
  background-color: rgba(0, 0, 0, 0);
  margin: 0 20rpx;
  height: 70vh;
}

//列表
.list_box {
  width: 100%;
  height: auto;
}

// 版心
.area {
  width: calc(100% - 40rpx);
  margin: 0 20rpx;
}

.list_box_list {
  background-color: $uni-bg-color;
  margin: 20rpx;
  border-radius: 18rpx;
  padding-bottom: 40rpx;
//头部
  .header {
    display: flex;
    align-items: center;
    border-bottom: 1rpx solid #EFEFEF;
    padding: 30rpx 0;
    margin-bottom: 20rpx;

    image {
      width: 104rpx;
      height: 104rpx;
      border-radius: 50%;
    }

    .header_cont {
      display: flex;
      flex-direction: column;
      margin-left: 20rpx;
    }

    .title {
      font-family: PingFangSC;
      color: $uni-text-color;
      font-weight: $uni-font-weight;
      font-size: 30rpx;
      margin-bottom: 10rpx;
    }

    .times {
      font-family: PingFangSC;
      color: #999999;
      font-weight: 500;
      font-size: $uni-font-size-sm;
      margin-right: 10rpx;
    }
  }
  // 内容区域
  .content{
    padding: 0rpx 30rpx;
    .title{
      font-family: PingFangSC;
        color: $uni-text-color;
        font-weight: $uni-font-weight;
        font-size: 34rpx;
        height: 100rpx;
        line-height: 100rpx;
        position: relative;
        &::after{
          content: '';
          position: absolute;
          bottom: 23%;
          left: 3%;
          z-index: 99;
          border-radius: 10rpx;
          width: 92rpx;
          height: 14rpx;
          background-color: rgba(0, 56, 247, 0.5);
        }
    
    }
    .pic{
          display: flex;
          align-items: center;
          &::after{
            left: 2%;
            width: 42rpx;
          }
        
        }
    .cont_information{
      background: #F9FAFF;
      padding: 30rpx;
      border-radius: 18rpx;
      &:last-child{
        image{
            width: 160rpx;
            height: 160rpx;
            border-radius: 16rpx;
            margin-right: 20rpx;
          }
      }
    }
  }
}
</style>